import React, { Component } from 'react';
import { Empty, Button, message } from 'antd';
import { observer, inject } from "mobx-react";
import s from './index.module.less';
import UserItem from '../../components/UserItem';
import CloseBar from '../../components/CloseBar';
import { UserDetail } from '../../components/MemberItem'
import BannerTips from '../../components/BannerTips';

@inject(({ contactsState }) => ({ contactsState }))
@observer
class ContactDetail extends Component {

    state = {
        loading: false,
        addIndex: null,
    }

    addContact = (recid, i) => {
        const { loading } = this.state;
        if (loading) return;
        this.setState({ loading: true, addIndex: i });
        const { passContact } = this.props.contactsState;
        passContact({ recid: recid }, () => {
            message.success('通过好友请求成功');
            this.setState({ loading: false, addIndex: null });
        });
    }

    render() {
        const {
            bannerTips,
            contactsState: { detailData: { info, applyList }, contactsIdObj }
        } = this.props;
        const { addIndex, loading } = this.state;
        return (
            <div className={s.detail}>
                <div className={s.detailHeader}>
                    <CloseBar />
                </div>
                <BannerTips
                    show={!!bannerTips}
                    autoplay={!!(bannerTips && bannerTips.tips)}
                    type={bannerTips && bannerTips.type}
                    message={bannerTips && bannerTips.message}
                    tips={bannerTips && bannerTips.tips}
                />
                <div className={s.detailContent}>
                    {info && (
                        <div className={s.wrap}>
                            <UserDetail info={info} />
                        </div>
                    )}
                    {applyList && (
                        <div className={s.applyWrap}>
                            {applyList.length ? applyList.map((v, i) => (
                                <UserItem
                                    key={v.recid}
                                    username={v.realname}
                                    headimage={v.headimage}
                                    extra={
                                        contactsIdObj[v.userid] ?
                                            <Button size={'small'} disabled>已通过</Button> :
                                            <Button size={'small'} type="primary" loading={(addIndex === i) && loading} onClick={() => this.addContact(v.recid, i)}>通过</Button>
                                    }
                                />
                            )) : <Empty description={'暂无记录'} />}
                        </div>
                    )}
                </div>
            </div>
        );
    }
}

export default ContactDetail